<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>hello {{count}}</h1>
      <button @click="count+=1">++</button>
      <button @click="count-=1">--</button>

      <hr />
      <xx-yy v-on:increment-xxyy="count+=1" :c="count"></xx-yy>
      <xx-yy :c="count"></xx-yy>

      <hr />
      <xx-counter></xx-counter>
      <xx-counter></xx-counter>
    </div>
    <script>
      Vue.component("xx-yy", {
        props: ["c"],
        // template:
        //   "<p>子组件 props{{c}} <button @click='clickHandler'>++</button></p>",
        template:
          "<p>子组件 props{{c}} <button @click='clickHandler'>++</button></p>",
        methods: {
          //   clickHandler: function () {
          //     // console.log(123);
          //     this.c = this.c + 1;
          //   },

          clickHandler: function () {
            // console.log(123);
            this.$emit("increment-xxyy");
          },
        },
        // 子组件不能修改 父级传下来的props 因为父组件变化会重新传值 覆盖
        // 幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：
      });

      //   子传父 调用组件监听自定义事件  子组件触发自定义事件

      Vue.component("xx-counter", {
        template: "<p @click='n+=1'>you clicked {{n}} times</p>",
        data: function () {
          return {
            n: 10,
          };
        },
        // data: {
        //   n: 10,
        // },
      });
      //   组件内部的data 必须是一个函数返回一个对象
      //   因为组件复用的时候需要 多个组件不要复用同一个data对象（浅拷贝）

      new Vue({
        el: "#app",
        data: {
          count: 1,
        },
      });
    </script>
  </body>
</html>
